<template>
  <div class="pwd-login">
    <div class="login-item">
      <label>工号/手机号</label>
      <div style="background-color: #fff">
        <AutoComplete
          class="form-input"
          v-model="value.searchKey"
          :data="autoData"
          @on-blur="onBlur"
          @on-search="onSearch"
          @on-change="onChange"
          placeholder="请输入工号/手机号"></AutoComplete>

        <div class="role-menu" v-if="showRole" @mouseover="isCustom = true" @mouseleave="isCustom = false">
          <Dropdown trigger="custom" :visible="isCustom" @on-click="menuSelected" placement="bottom-end">
            <span class="role-label">
              <span>{{ curRoleName }}</span>
              <Icon
                v-if="roleList.length > 1"
                color="#C7C7CC"
                type="ios-arrow-down"
                style="margin-top: 5px"></Icon>
            </span>

            <DropdownMenu slot="list">
              <DropdownItem
                v-for="(item, index) in roleList"
                :selected="item.selected"
                :name="item.roleName"
                :key="index">
                <span v-if="ifOneCompany">{{ item.appName }}</span>
                <Icon v-if="ifOneCompany" type="ios-arrow-forward" size="16" />
                <span>{{ item.roleName }}</span>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </div>
    </div>
    <div class="login-item">
      <label>密码</label>
      <div>
        <Input
          v-model="value.password"
          type="password"
          password
          class="form-input"
          placeholder="请输入密码" />
      </div>
    </div>
    <div class="login-item" v-if="showCode">
      <div>
        <Input v-model="value.code" class="form-input" placeholder="请输入验证码" />
        <div class="code-img" title="点击换一张" @click="() => getImgCode()">
          <img :src="codeSrc" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { DropdownItem } from 'view-design'
  import userMgr from '@/biz/user'

  export default {
    components: { DropdownItem },
    props: {
      value: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        curRoleName: '角色',
        showRole: false,
        isCustom: false,
        ifOneCompany: false,
        roleList: [],
        codeSrc: '',
        accounts: [],
        autoData: [],
        showCode: false
      }
    },
    mounted() {
      let accounts = userMgr.history().accounts
      this.accounts = accounts || []
    },
    methods: {
      // 获取角色列表
      getRoleList() {
        this.$tool.setStorage({ appId: 36 })
        userMgr.roles(this.value.searchKey).then((res) => {
          if (res.length > 0) {
            console.log(res, '333333')
            this.roleList = res
            // this.roleList.
            this.showRole = true
            let leng = res.findIndex((re) => re.appId !== res[0].appId)
            this.ifOneCompany = leng > -1 ? true : false
            if (res.length === 1) {
              this.curRoleName = res[0].roleName
              this.value.roleId = res[0].roleId
              this.value.authId = res[0].id
              res[0].selected = true
            } else {
              this.$nextTick(() => {
                this.isCustom = true
              })
            }

            this.$emit('roles', this.roleList)
          }
        })
      },
      // 获取图片验证码
      getImgCode() {
        this.value.code = ''
        userMgr
          .imgCode()
          .then((res) => {
            this.codeSrc = res.Image
            this.value.uuid = res.uuid
          })
          .catch((err) => {
            this.$Message.error(err)
          })
      },
      // 角色菜单选中
      menuSelected(mess) {
        console.log(mess, 'mess')

        // this.value.roleId = mess;
        this.roleList.forEach((item) => {
          item.selected = item.roleName == mess
          if (item.roleName == mess) {
            this.value.authId = item.id
            this.value.roleId = item.roleId
          }
          item.roleName == mess && (this.curRoleName = item.roleName) && this.$tool.setStorage({ appId: 36 })
        })
        let arrayList = this.$tool.deepClone(this.roleList)
        this.roleList = []
        this.roleList = arrayList
        this.isCustom = false
      },
      // 工号/手机号input框变化
      onChange(val) {
        this.roleList = []
        this.value.roleId = ''
        this.showRole = false
        this.$emit('roles', this.roleList)

        let searchKey = this.value.searchKey,
          length = searchKey.length,
          reg1 = /^[a-zA-Z0-9]{5,6}$/,
          reg2 = /^1[3456789]\d{9}$/

        // // 当输入到5、6位时，2秒钟之后判断值是否有变化，没有变化->查询角色
        if (length >= 5) {
          this.isInputing(searchKey)
        }

        if (length === 11 && reg2.test(searchKey)) {
          this.getRoleList()
        }
      },
      isInputing(val) {
        setTimeout(() => {
          if (val === this.value.searchKey) {
            this.getRoleList()
          }
        }, 2000)
      },
      // 工号/手机号input框失去焦点
      onBlur() {
        this.$nextTick(() => {
          let searchKey = this.value.searchKey,
            length = searchKey.length,
            reg1 = /^[a-zA-Z0-9]{5,6}$/,
            reg2 = /^1[3456789]\d{9}$/

          if (!searchKey) return
          // if (
          //   (length !== 5 && length !== 6 && length !== 11) ||
          //   ((length === 5 || length === 6) && !reg1.test(searchKey)) ||
          //   (length === 11 && !reg2.test(searchKey))
          // ) {
          //   this.$Message.error('工号或手机号有误，请核对')
          // }
        })
      },
      // 工号/手机号input框输入搜索
      onSearch(value) {
        this.autoData = this.accounts.filter((item) => item.indexOf(value) > -1)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-item {
    margin-bottom: 16px;

    > label {
      color: #333333;
      display: inline-block;
      margin-bottom: 5px;
    }

    > div {
      height: 46px;
      display: flex;
      align-items: center;
    }

    .role-menu {
      width: 140px;
      height: 25px;
      line-height: 25px;
      border-left: 1px solid #eee;
      background-color: #fff;

      ::v-deep .ivu-dropdown-rel {
        margin: 0;
        padding: 0 10px 0 16px;
        width: 140px;
      }

      ::v-deep .ivu-dropdown-item {
        width: 140px;
      }
    }

    .form-input {
      flex: 1;
    }

    .role-label {
      display: flex;
      justify-content: space-between;
      height: 36px;
    }

    .code-img {
      width: 120px;
      height: 100%;
      margin-left: 16px;
      background-color: #fff;
      border: 1px solid #eee;
      cursor: pointer;

      image {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }

  ::v-deep .ivu-input {
    height: 46px;
    padding-left: 12px;
    border: none;
    box-shadow: none;
  }

  ::v-deep .ivu-input-suffix i {
    line-height: 46px;
  }
</style>
